<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>todos</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
        min-width: 700px;
      }
      ul {
        list-style: none;
      }
      .main {
        max-width: 600px;
        padding: 50px;
        height: 100%;
        box-shadow: 0 0 2px rgba(255, 0, 0, 0.5);
        margin: 20px;
        background: #cdcdcd;
      }
      .main .input-box {
        width: 100%;
        height: 50px;
        box-shadow: 0 1px 2px rgba(255, 0, 0, 0.5);
        display: flex;
        background: #2f2f2ffa;
      }
      .main .input-box > h1 {
        height: 100%;
        line-height: 50px;
        font-size: 24px;
        flex: 1;
        color: #ffffff;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        padding: 0 20px;
        box-sizing: border-box;
      }
      .main .input-box > div {
        height: 100%;
        flex: 2;
        /* background: #ffffff; */
        box-sizing: border-box;
        padding: 10px 20px;
      }
      .main .input-box > div > input {
        border: none;
        outline: none;
        background: none;
        height: 100%;
        width: 100%;
        background: #ffffff;
        border-radius: 5px;
        text-indent: 1em;
      }
      .main .input-box > div > input::-webkit-input-placeholder {
        color: #000000;
      }
      .h3-title {
        padding: 20px;
      }
      .todos-box li {
        padding: 0 20px;
        margin-bottom: 10px;
        height: 32px;
        line-height: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .todos-box li.newTods {
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
      }
      .todos-box li.doneTodo {
        background: #e6e6e6;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        color: #8e8e8e;
      }
      .delTodo-btn {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #cccccc;
        border: none;
        color: #ffffff;
        margin-left: 10px;
        outline: none;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
      }
      .delTodo-btn:active {
        width: 18px;
        height: 18px;
      }
    </style>
  </head>
  <body>
    <div id="app" class="main">
      <div class="input-box">
        <h1>todoList</h1>
        <div>
          <input
            placeholder="添加todos,回车确定"
            type="text"
            name=""
            id=""
            @change="onAddTodo"
          />
        </div>
      </div>
      <div>
        <h3 class="h3-title">正在进行的</h3>
        <ul class="todos-box">
          <li v-for="(item,index) in list" :key="item.id" class="newTods">
            <input
              type="checkbox"
              name="todos"
              :id="item.id"
              :value="item"
              @click="onDoneTodo(index,item,$event)"
            />
            <input
              v-show="item.isInput"
              style="width: 50%"
              :ref="item.id"
              @blur="onBlur(index)"
              type="text"
              name="todos"
              :value="item.text"
              @change="changeTodos(index,$event)"
            />
            <span
              @dblclick="onUpdateTodo(index)"
              v-show="!item.isInput"
              style="
                cursor: auto;
                width: 50%;
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
              :title="item.text"
              >{{item.text}}</span
            >
            <span style="text-align: right; float: right; font-size: 14px"
              >{{item.date}}</span
            >
            <button
              class="delTodo-btn"
              @click="onDeleteTodo(index,'list',$event)"
            >
              -
            </button>
          </li>
        </ul>
      </div>
      <div>
        <h3 class="h3-title">已经完成的</h3>
        <ul class="todos-box">
          <li v-for="(item, index) in doneList" :key="item.id" class="doneTodo">
            <input
              type="checkbox"
              name="todos"
              :id="item.id"
              :value="item"
              @click="onRestoreTodo(index,item,$event)"
              checked
              style="vertical-align: 9.2px"
            />
            <span
              style="
                cursor: auto;
                width: 50%;
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
              :title="item.text"
              >{{item.text}}</span
            >
            <span style="text-align: right; float: right; font-size: 14px"
              >{{item.date}}</span
            >
            <button
              style="float: right"
              class="delTodo-btn"
              @click="onDeleteTodo(index,'doneList',$event)"
            >
              -
            </button>
          </li>
        </ul>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      Vue.prototype.trim = (str) => {
        return str.replace(/(^\s*)|(\s*$)/g, '');
      };
      const vm = new Vue({
        el: '#app',
        data: {
          newTodo: '',
          isInput: false,
          doneList: [],
          list: [
            {
              id: 1,
              isInput: false,
              date: new Date().toLocaleString(),
              text: '我是测试数据',
            },
            {
              id: 2,
              isInput: false,
              date: new Date().toLocaleString(),
              text: '我是测试数据',
            },
          ],
        },
        created() {
          this.init();
        },
        methods: {
          init() {
            let list = JSON.parse(localStorage.getItem('list'));
            let doneList = JSON.parse(localStorage.getItem('doneList'));
            list && (this.list = list);
            doneList && (this.doneList = doneList);
          },
          // 存储到LocalStorge
          updateStorgeTodosList(val) {
            localStorage.setItem('list', JSON.stringify(val));
          },
          updateStorgeTodoDoneList(val) {
            localStorage.setItem('doneList', JSON.stringify(val));
          },
          // 从已完成中恢复的todo事件
          onRestoreTodo(index, item, e) {
            this.list.push(item);
            this.doneList.splice(index, 1);
          },
          // 已完成的todo事件
          onDoneTodo(index, item, e) {
            this.list.splice(index, 1);
            this.doneList.push(item);
          },
          // 删除todo的事件
          onDeleteTodo(index, name, e) {
            this[name].splice(index, 1);
          },
          onAddTodo(e) {
            this.list.push({
              id: Date.now(),
              isInput: false,
              date: new Date().toLocaleString(),
              text: e.target.value,
            });
            e.target.value = '';
          },
          changeTodos(i, e) {
            let text = e.target.value;
            if (this.trim(text).length != 0) {
              this.list.forEach((item, index) => {
                if (index == i) {
                  item.text = text;
                  item.date = new Date().toLocaleString();
                }
              });
            } else {
              this.list.splice(i, 1);
            }
          },
          // 双击span切换为input的事件
          onUpdateTodo(i, e) {
            window.getSelection
              ? window.getSelection().removeAllRanges()
              : document.selection.empty();
            this.list.forEach((item, index) => {
              if (index == i) {
                item.isInput = !item.isInput;
                this.$nextTick(() => {
                  this.$refs[item.id][0].select();
                  // console.log(this.$refs[item.id][0]);
                });
              }
            });
          },
          // 输入框失去焦点
          onBlur(i) {
            this.list.forEach((item, index) => {
              if (index == i) {
                item.isInput = !item.isInput;
              }
            });
          },
        },
        watch: {
          list: {
            handler: function (val) {
              this.updateStorgeTodosList(val);
            },
            deep: true,
          },
          doneList: {
            handler: function (val) {
              this.updateStorgeTodoDoneList(val);
            },
            deep: true,
          }
        },
      });
    </script>
  </body>
</html>
